---
breakpoint: tablet
title: Theming
path: /theming/
---

# Theming

## Global theming

Bumbag can be extensively themed to meet your requirements. You can either **override the default Bumbag theme** or **create your own custom theme** from scratch. If you like the default theme and want to keep it simple, we recommend you just override the default.

### Overriding the default global theme (recommended)

The `<ThemeProvider>` component accepts `theme` as a prop, where you can specify overrides to the default Bumbag theme. The schema of the `theme` object can be seen [here](#theme-schema).

```jsx
import { Provider as BumbagProvider, css } from 'bumbag';

const theme = {
  global: {
    fontSize: 18,
    styles: {
      base: css`
        html,
        body {
          background-color: hotpink;
          color: white;
        }
      `
    }
  },
  fonts: {
    default: 'Comic Sans MS'
  },
  palette: {
    primary: 'blue'
  },
  breakpoints: {
    mobile: 520,
    tablet: 960
  },
  Button: {
    defaultProps: {
      palette: 'primary'
    }
  },
  Heading: {
    styles: {
      base: {
        color: 'primary'
      }
    }
  }
}

const App = () => (
  <BumbagProvider theme={theme}>
    // ... your app
  </BumbagProvider>
);
```

### Creating your own global theme (advanced)

If you decide to not use the default Bumbag theme and roll out your own, just add the `isStandalone` flag to `<ThemeProvider>`.

```jsx
import { Provider as BumbagProvider, defaultTheme } from 'bumbag';

const App = () => (
  <BumbagProvider isStandalone theme={defaultTheme()}>
    // ... your app
  </BumbagProvider>
);
```

## Component theming

Bumbag also allows you to define themes on a component level. This can be done in three ways:

- **Globally themed**: Applying the component to the global theme.
- **Locally themed**: Creating a themed component via the `applyTheme` function.
- **Locally themed**: Applying the component theme via the `overrides` prop on the component.

Each component theme configuration always consists of 4 attributes:

- `styles` - Where the main styling is defined for the component.
- `variants` - Where the [component variants](/variants) are defined.
- `modes` - Where the [component color modes](/color-modes) are defined.
- `defaultProps` - The default props to apply to the component.

For each docs page of the component, you will find a [**Theming** section](/components/button/#theming) where you can reference the schema of the component theme configuration.

### Applying the component to the global theme


```jsx
import { Provider as BumbagProvider, css } from 'bumbag';

const theme = {
  Button: {
    styles: {
      base: {
        color: 'black',

        // Here we are using "spacing" values from the theme.
        // But you can specify a `px`, `rem` or `em` value too.
        padding: 'major-2'
      }
    },
    variants: {
      'call-to-action': {
        fontSize: '300',
        padding: 'major-4'
      }
    },
    modes: {
      dark: {
        color: 'white'
      }
    },
    defaultProps: {
      palette: 'primary'
    }
  }
}

const App = () => (
  <BumbagProvider theme={theme}>
    // ... your app
  </BumbagProvider>
);
```

### Creating a themed component

You can apply the theme on a component level via the `applyTheme` utility function. This function accepts two parameters: the first being the **component**, and the second being the **component theme config**.

```jsx
import { applyTheme } from 'bumbag';
```

```function-live noInline
const Card = applyTheme(Box, {
  styles: {
    base: {
      // Here we are using "spacing" values from the theme.
      // But you can specify a `px`, `rem` or `em` value too.
      padding: 'major-2'
    }
  },
  defaultProps: {
    altitude: '100'
  },
  variants: {
    dope: {
      defaultProps: {
        fontFamily: 'Comic Sans MS'
      }
    }
  }
})

function Example() {
  return (
    <Card variant="dope">
      Welcome to Bumbag!
    </Card>
  )
}

render(Example)
```

### Using the `overrides` prop

It is possible to override the global theme on the component themselves using the `override` prop on any component.

```function-live noInline
function Example() {
  return (
    <Provider theme={theme}>
      <Box
        variant="dope"
        overrides={{
          Box: {
            styles: {
              base: {
                // Here we are using "spacing" values from the theme.
                // But you can specify a `px`, `rem` or `em` value too.
                padding: 'major-2'
              }
            },
            defaultProps: {
              altitude: '100'
            },
            variants: {
              dope: {
                defaultProps: {
                  fontFamily: 'Comic Sans MS'
                }
              }
            }
          }
        }}
      >
        Welcome to Bumbag!
      </Box>
    </Provider>
  )
}

render(Example)
```

## Theme schema

```js
{
  // Core
  altitudes: AltitudesThemeConfig;
  borders: BordersThemeConfig;
  borderRadii: BorderRadiiThemeConfig;
  breakpoints: BreakpointsThemeConfig;
  fontSizes: FontSizeThemeConfig;
  fontWeights: FontWeightsThemeConfig;
  global: GlobalThemeConfig;
  spacing: SpacingThemeConfig;
  palette: PaletteThemeConfig;

  // Components
  ActionButtons: ActionButtonsThemeConfig;
  Alert: AlertThemeConfig;
  Autosuggest: AutosuggestThemeConfig;
  Avatar: AvatarThemeConfig;
  Badge: BadgeThemeConfig;
  Breadcrumb: BreadcrumbThemeConfig;
  Box: BoxThemeConfig;
  Block: BlockThemeConfig;
  Blockquote: BlockquoteThemeConfig;
  Button: ButtonThemeConfig;
  Callout: CalloutThemeConfig;
  Card: CardThemeConfig;
  Checkbox: CheckboxThemeConfig;
  CheckboxField: CheckboxFieldThemeConfig;
  CheckboxGroup: CheckboxGroupThemeConfig;
  CheckboxGroupField: CheckboxGroupFieldThemeConfig;
  Clickable: ClickableThemeConfig;
  Code: CodeThemeConfig;
  Columns: ColumnsThemeConfig;
  Container: ContainerThemeConfig;
  Dialog: DialogThemeConfig;
  Disclosure: DisclosureThemeConfig;
  Drawer: DrawerThemeConfig;
  DropdownMenu: DropdownMenuThemeConfig;
  FieldWrapper: FieldWrapperThemeConfig;
  Flex: FlexThemeConfig;
  Grid: GridThemeConfig;
  Group: GroupThemeConfig;
  Heading: HeadingThemeConfig;
  HighlightedCode: HighlightedCodeThemeConfig;
  Icon: IconThemeConfig;
  Image: ImageThemeConfig;
  Inline: InlineThemeConfig;
  InlineBlock: InlineBlockThemeConfig;
  InlineFlex: InlineFlexThemeConfig;
  Input: InputThemeConfig;
  InputField: InputFieldThemeConfig;
  Stack: StackThemeConfig;
  Link: LinkThemeConfig;
  List: ListThemeConfig;
  Menu: MenuThemeConfig;
  Modal: ModalThemeConfig;
  Navigation: NavigationThemeConfig;
  Overlay: OverlayThemeConfig;
  PageContent: PageContentThemeConfig;
  PageWithSidebar: PageWithSidebarThemeConfig;
  Pagination: PaginationThemeConfig;
  Paragraph: ParagraphThemeConfig;
  Popover: PopoverThemeConfig;
  Portal: PortalThemeConfig;
  ProgressBar: ProgressBarThemeConfig;
  Radio: RadioThemeConfig;
  RadioGroup: RadioGroupThemeConfig;
  RadioGroupField: RadioGroupFieldThemeConfig;
  Rating: RatingThemeConfig;
  Rover: RoverThemeConfig;
  Select: SelectThemeConfig;
  SelectField: SelectFieldThemeConfig;
  SelectMenu: SelectThemeConfig;
  Set: SetThemeConfig;
  SideNav: SideNavThemeConfig;
  Spinner: SpinnerThemeConfig;
  Switch: SwitchThemeConfig;
  SwitchField: SwitchFieldThemeConfig;
  SwitchGroup: SwitchGroupThemeConfig;
  SwitchGroupField: SwitchGroupFieldThemeConfig;
  Tabbable: TabbableThemeConfig;
  Table: TableThemeConfig;
  Tabs: TabsThemeConfig;
  Tag: TagThemeConfig;
  Text: TextThemeConfig;
  Textarea: TextareaThemeConfig;
  TextareaField: TextareaFieldThemeConfig;
  Toast: ToastThemeConfig;
  Tooltip: TooltipThemeConfig;
  TopNav: TopNavThemeConfig;
}
```

### Reference

#### Core

- [AltitudesThemeConfig](/the-box-primitive/altitudes/#theming)
- [BordersThemeConfig](/the-box-primitive/borders/#theming)
- [BorderRadiiThemeConfig](/the-box-primitive/border-radius/#theming)
- [BreakpointsThemeConfig](/breakpoints/#theming)
- [FontSizeThemeConfig](/fonts/#theming)
- [FontWeightsThemeConfig](/fonts/#theming)
- [GlobalThemeConfig](/global-styles/#theming)
- [SpacingThemeConfig](/layout-spacing/#theming)
- [PaletteThemeConfig](/palette/#theming)

#### Components

- [ActionButtonsThemeConfig](/components/action-buttons/#theming)
- [AlertThemeConfig](/components/alert/#theming)
- [AutosuggestThemeConfig](/form/autosuggest/#theming)
- [AutosuggestFieldThemeConfig](/form/autosuggest/#theming)
- [AvatarThemeConfig](/components/avatar/#theming)
- [BadgeThemeConfig](/components/badge/#theming)
- [BreadcrumbThemeConfig](/components/breadcrumb/#theming)
- [BoxThemeConfig](/the-box-primitive/box/#theming)
- [BlockquoteThemeConfig](/typography/blockquote/#theming)
- [ButtonThemeConfig](/components/button/#theming)
- [CalloutThemeConfig](/components/callout/#theming)
- [CardThemeConfig](/components/card#theming)
- [CheckboxThemeConfig](/form/checkbox/#theming)
- [CheckboxFieldThemeConfig](/form/checkbox/#theming)
- [CheckboxGroupThemeConfig](/form/checkbox-group/#theming)
- [CheckboxGroupFieldThemeConfig](/form/checkbox-group/#theming)
- [ClickableThemeConfig](/utilities/clickable/#theming)
- [CodeThemeConfig](/components/code#theming)
- [ColumnsThemeConfig](/layout/columns/#theming)
- [ContainerThemeConfig](/layout/container/#theming)
- [DialogThemeConfig](/components/dialog/#theming)
- [DisclosureThemeConfig](/utilities/disclosure/#theming)
- [DrawerThemeConfig](/utilities/drawer/#theming)
- [DropdownMenuThemeConfig](/components/dropdown-menu/#theming)
- [FieldWrapperThemeConfig](/form/field-wrapper/#theming)
- [GroupThemeConfig](/utilities/group/#theming)
- [HeadingThemeConfig](/typography/heading/#theming)
- [HighlightedCodeThemeConfig](/addons/highlighted-code/#theming)
- [IconThemeConfig](/components/icon/#theming)
- [ImageThemeConfig](/components/image/#theming)
- [InputThemeConfig](/form/input/#theming)
- [InputFieldThemeConfig](/form/input/#theming)
- [LinkThemeConfig](/typography/link/#theming)
- [ListThemeConfig](/typography/list/#theming)
- [MenuThemeConfig](/components/menu/#theming)
- [ModalThemeConfig](/utilities/modal/#theming)
- [NavigationThemeConfig](/components/navigation/#theming)
- [OverlayThemeConfig](/utilities/overlay/#theming)
- [PageContentThemeConfig](/page-shells/page-content/#theming)
- [PageWithSidebarThemeConfig](/page-shells/page-with-sidebar/#theming)
- [PaginationThemeConfig](/components/pagination/#theming)
- [ParagraphThemeConfig](/components/paragraph/#theming)
- [PopoverThemeConfig](/components/popover/#theming)
- [PortalThemeConfig](/utilities/portal/#theming)
- [ProgressBarThemeConfig](/components/progress-bar/#theming)
- [RadioThemeConfig](/form/radio/#theming)
- [RadioGroupThemeConfig](/form/radio-group/#theming)
- [RadioGroupFieldThemeConfig](/form/radio-group/#theming)
- [RatingThemeConfig](/components/rating/#theming)
- [RoverThemeConfig](/utilities/rover/#theming)
- [SelectThemeConfig](/form/select/#theming)
- [SelectFieldThemeConfig](/form/select/#theming)
- [SelectMenuThemeConfig](/form/select-menu#theming)
- [SelectMenuFieldThemeConfig](/form/select-menu#theming)
- [SetThemeConfig](/layout/set/#theming)
- [SideNavThemeConfig](/components/side-nav/#theming)
- [SpinnerThemeConfig](/components/spinner/#theming)
- [StackThemeConfig](/layout/stack/#theming)
- [SwitchThemeConfig](/form/switch/#theming)
- [SwitchFieldThemeConfig](/form/switch/#theming)
- [SwitchGroupThemeConfig](/form/switch-group/#theming)
- [SwitchGroupFieldThemeConfig](/form/switch-group/#theming)
- [TabbableThemeConfig](/utilities/tabbable/#theming)
- [TableThemeConfig](/components/table/#theming)
- [TabsThemeConfig](/components/tabs/#theming)
- [TagThemeConfig](/components/tag/#theming)
- [TextThemeConfig](/typography/text/#theming)
- [TextareaThemeConfig](/form/textarea/#theming)
- [TextareaFieldThemeConfig](/form/textarea/#theming)
- [ToastThemeConfig](/components/toast/#theming)
- [TooltipThemeConfig](/components/tooltip/#theming)
- [TopNavThemeConfig](/components/top-nav/#theming)
